<template>
    <div id='login'>
        <div class="box">

            <el-row class="row">
                <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="grid-content bg-purple">
                        <p>欢迎登录 - MMALL管理系统</p>
                        <el-form :model="user" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                            <el-form-item prop="username">
                                <el-input v-model="user.username"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model="user.password"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')"
                                    style="width:100%; background:#337ab7;">登录
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
    import {} from 'vuex'
    import Vue from 'vue';
    import {
        login
    } from '../api/index'
    import {
        Form,
        FormItem,
        Button,
        Input,
        Row,
        Col,
        Message,
    } from 'element-ui'

    Vue.prototype.$message = Message;
    export default {
        components: {
            'el-form': Form,
            'el-form-item': FormItem,
            'el-button': Button,
            'el-input': Input,
            'el-row': Row,
            'el-col': Col,
        },
        data() {
            return {
                user: {
                    username: 'admin',
                    password: 'admin'
                },
                rules: {
                    username: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        },
                        {
                            min: 5,
                            max: 12,
                            message: '长度在 5 到 12 个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                        {
                            min: 5,
                            max: 12,
                            message: '长度在 5 到 12 个字符',
                            trigger: 'blur'
                        }
                    ],
                },
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        login(this.user)
                            .then((res) => {
                                console.log(res);
                                if (res.data.status != 0) {
                                    // console.log(1);
                                    this.$message.error(`${res.data.msg}`);
                                } else {
                                    var obj = {
                                        admin: res.data.data.username,
                                        time: Date.now(),
                                        expire: 1000 * 60 * 30,
                                    }
                                    sessionStorage.setItem('admin', JSON.stringify(obj))
                                    this.$message({
                                        message: `${res.data.msg}`,
                                        type: 'success'
                                    });
                                    this.$router.push('/')
                                }
                            }).catch((err) => {
                                // console.log(err);
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        mounted() {
            var time = new Date(+new Date())
            // var ym = time.toLocaleDateString()
            // var am = time.toLocaleTimeString()
            console.log(time);
            // console.log(ym + am);
        },
        computed: {}
    }
</script>
<style lang='scss' scoped>
    #login {
        width: 100%;
        height: 100%;
        position: relative;
        background: rgb(220, 220, 223);
    }

    .box {
        width: 100%;
        height: 230px;
        position: absolute;
        top: 50%;
        transform: translate(0, -80%);

        .el-row {
            // background: #000;
            width: 100%;
            display: flex;
            justify-content: center;

            .el-col {
                &>div {
                    background: white;
                    border: 1px solid whitesmoke;
                    padding: 15px;

                    &>p {
                        width: 100%;
                        text-align: center;
                        margin-bottom: 15px;
                    }
                }
            }
        }
    }
</style>